<template>
  <div class="categories">
    <div class="left">
      <mt-navbar v-model="selected">
        <mt-tab-item
          :id="item.id"
          v-for="(item,index) in firstCateList"
          :key="index"
        >{{item.categoryName}}</mt-tab-item>
      </mt-navbar>
    </div>
    <div class="right">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item :id="item.id" v-for="(item,index) in firstCateList" :key="index">
          <ul class="cateList">
            <li v-for="(item1,index1) in secondCateList" :key='index1'>
              <router-link to>
                <img
                  :src="'http://127.0.0.1:3000/'+item1.brandLogo" alt="">
                <p>{{item1.brandName}}</p>
              </router-link>
            </li>
            <span v-show = 'secondCateList.length === 0'>没有任何二级分类数据</span>
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="2"></mt-tab-container-item>
        <mt-tab-container-item id="3"></mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>
<script>
import { getFirstCategory, getSecondCategory } from '@/api/index.js'
export default {
  data () {
    return {
      selected: '1',
      firstCateList: [],
      secondCateList: []
    }
  },
  //   我们需要监听selected变量
  watch: {
    // watch是监听属性，它里面的函数的名称必须和你想监听的属性名称一致
    selected (value) {
      console.log(value)
      getSecondCategory(value).then(result => {
        this.secondCateList = result.data.rows
      })
    }
  },
  mounted () {
    getFirstCategory().then(result => {
      if (result.status === 200) {
        // console.log(result.data)
        this.firstCateList = result.data.rows
        this.selected = this.firstCateList[0].id
      }
    })
  }
}
</script>
<style lang="scss">
.categories {
  //   height: 100vh;
  height: 100%;
  display: flex;
}
.left {
  width: 100px;
  .mint-navbar {
    flex-direction: column;
  }
}
.right {
  flex: 1;
  .cateList {
    > li {
      width: 33.33%;
      float: left;
      text-align: center;
      margin: 10px 0;
      img {
        width: 100%;
        display: block;
      }
    }
  }
}
</style>
